<template>
	<view v-show="i === index">
		<mescroll-body :top="180" :safearea="true" :down="downOption" :up="upOption" :topbar="true" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<uni-card v-for="(item, index) in dataSource" :key="index" :is-shadow="false" :title="item.title" sub-title="1066002323">
				<view class="flex uni-mb-1">
					<view class="basis-lg text-cut">
						<uni-icons class="inline-flex" custom-prefix="uwofont" type="uwo-bianhao" size="14" color="#2979ff"></uni-icons>
						力学与安全工程学院
					</view>
					<view class="basis-sm">
						<uni-icons custom-prefix="uwofont" type="uwo-dengji" size="14" color="#2979ff"></uni-icons>
						{{ labLevel(item.level) }}
					</view>
				</view>
				<view class="flex uni-mb-1">
					<view class="basis-lg">
						<uni-icons custom-prefix="uwofont" type="uwo-fenlei" size="14" color="#2979ff"></uni-icons>
						化学类
					</view>
					<view class="basis-sm">
						<uni-icons custom-prefix="uwofont" type="uwo-shiyanxingzhi" size="14" color="#2979ff"></uni-icons>
						科研用房
					</view>
				</view>

				<view class="flex uni-mb-1">
					<view class="flex-sub">
						<uni-icons custom-prefix="uwofont" type="uwo-fuzeren" size="14" color="#2979ff"></uni-icons>
						负责人：
						<text class="uni-primary" @click="callPhone(17335778685)">皮卡丘/17335778685</text>
					</view>
				</view>
			</uni-card>
		</mescroll-body>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
// 子组件的mescroll-body无需传入onPageScroll, onReachBottom
const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
defineExpose({ getMescroll }); // 使父组件可以通过ref调用到getMescroll方法 (必须)
import { labLevel } from '@/common/js/sysDict.js';
const dataSource = ref([]);
const isAutoInit = props.i === props.index; // 自动加载当前tab的数据
const isInit = ref(isAutoInit); // 当前tab是否已初始化
const downOption = {
	auto: isAutoInit // 不自动加载
};
const upOption = {
	auto: false, // 不自动加载
	page: {
		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4
};
const props = defineProps({
	i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
	index: {
		// 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		type: Number,
		default() {
			return 0;
		}
	},
	params: {
		type: Object,
		default() {
			return {};
		}
	}
});
// 监听下标的变化
watch(
	() => props.index,
	(val) => {
		if (props.i === val && !isInit.value) {
			isInit.value = true; // 标记为true
			const mescroll = getMescroll();
			if (mescroll) {
				getMescroll().resetUpScroll(); // 重置列表数据为第一页
				getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
			}
		}
	},
	{
		immediate: true
	}
);
// 监听参数的变化
watch(
	() => props.params,
	(val) => {
		if (isInit.value) {
			const mescroll = getMescroll();
			if (mescroll) {
				if (mescroll.optDown.use) {
					mescroll.triggerDownScroll();
				} else {
					mescroll.triggerUpScroll();
				}
			}
		}
	},
	{
		deep: true
	}
);
/**
 * 如果页面存在电话号，则加上拨打电话
 */
const callPhone = (tel) => {
	uni.makePhoneCall({
		phoneNumber: tel
	});
};
/**
 * 数据请求
 */
const getList = () => {
	console.log(props.params);
	return new Promise((r) => {
		let rows = [];
		for (var i = 0; i < 10; i++) {
			rows.push({
				title: '实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称' + i,
				state: i < 5 ? '1' : '0',
				level: Math.floor(Math.random() * 4) + 1 + ''
			});
		}
		setTimeout(() => {
			const res = {
				code: 1,
				data: {
					pages: 100,
					pageSize: 10,
					pageNumber: 1,
					total: 1000,
					rows: rows
				}
			};
			r(res);
		}, 500);
	});
};
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
const upCallback = (page) => {
	getList({
		pageNumber: page.num,
		pageSize: page.size
	})
		.then((res) => {
			if (res.code === 1) {
				const data = res.data;
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				getMescroll().endBySize(data.rows.length, data.pages);
				if (page.num == 1) dataSource.value = []; //如果是第一页需手动制空列表
				dataSource.value = dataSource.value.concat(data.rows); //追加新数据
			}
		})
		.catch(() => {
			//联网失败, 结束加载
			getMescroll().endErr();
		});
};
const search = (param) => {
	params = param;
	// 处理排序参数
	if (params.order) {
		// name-order
		const str = params.order.split('-');
		params.sortName = str[0];
		params.sortOrder = str[1];
		delete params.order;
	}
	getMescroll().resetUpScroll(); // 重置列表数据为第一页
	getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
};
</script>

<style></style>
